<template>
  <div class="yijing-container">
    <!-- 八卦图装饰 -->
    <div class="bagua-decoration top-left">
      <div class="bagua-symbol">☰</div>
    </div>
    <div class="bagua-decoration top-right">
      <div class="bagua-symbol">☷</div>
    </div>
    <div class="bagua-decoration bottom-left">
      <div class="bagua-symbol">☳</div>
    </div>
    <div class="bagua-decoration bottom-right">
      <div class="bagua-symbol">☶</div>
    </div>
    
    <!-- 古风边框装饰 -->
    <div class="chinese-border top-border"></div>
    <div class="chinese-border right-border"></div>
    <div class="chinese-border bottom-border"></div>
    <div class="chinese-border left-border"></div>
    
    <!-- 祥云装饰 -->
    <div class="cloud-decoration cloud-1">☁</div>
    <div class="cloud-decoration cloud-2">☁</div>
    <div class="cloud-decoration cloud-3">☁</div>
    <div class="cloud-decoration cloud-4">☁</div>
    
    <!-- 八卦图装饰 -->
    <div class="bagua-decoration top-left">
      <div class="bagua-symbol">☰</div>
    </div>
    <div class="bagua-decoration top-right">
      <div class="bagua-symbol">☷</div>
    </div>
    <div class="bagua-decoration bottom-left">
      <div class="bagua-symbol">☳</div>
    </div>
    <div class="bagua-decoration bottom-right">
      <div class="bagua-symbol">☶</div>
    </div>
    
    <div class="header">
      <h1>易经算卦</h1>
      <p>使用硬币算卦法，诚心提问，获得卦象指引</p>
    </div>

    <div class="input-section">
      <!-- 问题输入框 -->
      <div class="question-input">
        <label for="question">您的问题：</label>
        <textarea
          id="question"
          v-model="question"
          placeholder="请输入您想要咨询的问题..."
          rows="3"
          @keypress.enter.prevent="generateCoinGua"
        ></textarea>
      </div>



      <div class="action-buttons">
        <button @click="generateCoinGua" :disabled="loading" class="coin-btn">
          <span class="btn-icon">🪙</span>
          {{ loading ? '算卦中...' : '硬币算卦' }}
        </button>
        <button @click="generateRandom" class="random-btn">
          <span class="btn-icon">🎲</span>
          随机生成
        </button>
        <router-link to="/step-by-step" class="step-by-step-btn">
          <span class="btn-icon">🔮</span>
          逐步硬币算卦
        </router-link>
      </div>
    </div>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <div v-if="result" class="result-section">
      <YijingGuaDisplay
        :yaos="result.guaXiang.yaos"
        :gua-name="result.guaXiang.guaName"
        :gua-ci="result.guaXiang.guaCi"
        :xiang-ci="result.guaXiang.xiangCi"
      />

      <div v-if="result.bianGua" class="bian-gua-section">
        <h3>变卦分析</h3>
        <div class="bian-gua-info">
          <p>本卦中有 {{ result.bianGua.changingYaos.length }} 个变爻</p>
          <p>变卦为：{{ result.bianGua.changed.guaName }}卦</p>
        </div>
      </div>

      <InterpretationDisplay :interpretation="result.interpretation" />
    </div>

    <div v-else-if="!loading" class="placeholder">
      <p>请点击硬币算卦或随机生成开始算卦</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useProgressStore } from '@/stores/progressStore'
import { useRouter } from 'vue-router'

const router = useRouter()
const progress = useProgressStore()

// 恢复进度
onMounted(() => {
  if (progress.restore()) {
    question.value = progress.question
  }
})

// 离开页面时保存进度
onUnmounted(() => {
  if (result.value) {
    progress.clear() // 算卦完成则清除进度
  } else if (question.value) {
    progress.saveProgress({
      question: question.value,
      currentStep: 1 // 表示已开始但未完成
    })
  }
})
import YijingGuaDisplay from '@/components/YijingGuaDisplay.vue'
import InterpretationDisplay from '@/components/InterpretationDisplay.vue'
import { yijingApi } from '@/api/yijingApi'

const numbers = ref([null, null, null])
const question = ref('')
const loading = ref(false)
const error = ref('')
const result = ref(null)



const generateCoinGua = async () => {
  // 验证问题输入
  if (!question.value.trim()) {
    error.value = '请输入您的问题后再进行算卦'
    return
  }

  // 保存问题到进度
  progress.saveProgress({
    question: question.value,
    currentStep: 1
  })

  loading.value = true
  error.value = ''

  try {
    const response = await yijingApi.coinDivination({ question: question.value })
    
    if (response.success && response.data) {
      result.value = response.data
    } else {
      throw new Error(response.message || '硬币算卦失败')
    }
  } catch (err) {
    error.value = err.message || '硬币算卦时出现错误'
  } finally {
    loading.value = false
    if (result.value) {
      // 算卦完成时清除进度
      progress.clear()
    }
  }
}

const generateRandom = async () => {
  loading.value = true
  error.value = ''

  try {
    const response = await yijingApi.randomDivination(question.value)
    
    if (response.success && response.data) {
      result.value = response.data
    } else {
      throw new Error(response.message || '随机生成失败')
    }
  } catch (err) {
    error.value = err.message || '随机生成卦象时出现错误'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.yijing-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 30px;
  min-height: 100vh;
  background: linear-gradient(135deg, #2C1810 0%, #3A2618 50%, #2C1810 100%);
  position: relative;
  overflow: hidden;
  font-family: 'SimSun', 'STKaiti', 'KaiTi', serif;
}

.header {
  text-align: center;
  margin-bottom: 50px;
  color: #F5DEB3;
  position: relative;
}

.header h1 {
  font-size: 48px;
  font-weight: normal;
  margin-bottom: 12px;
  color: #D4AF37;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 4px;
}

.header p {
  font-size: 18px;
  opacity: 0.9;
  color: #F5DEB3;
  font-style: italic;
  margin-top: 8px;
}

.input-section {
  background: rgba(245, 222, 179, 0.95);
  padding: 32px;
  border-radius: 8px;
  border: 2px solid #8B4513;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 0 20px rgba(139, 69, 19, 0.1);
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.number-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-group label {
  font-weight: 500;
  margin-bottom: 10px;
  color: #8B4513;
  font-size: 16px;
}

.input-group input {
  padding: 14px;
  border: 2px solid #8B4513;
  border-radius: 4px;
  font-size: 18px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  color: #2C1810;
  font-family: 'SimSun', serif;
  text-align: center;
}

.input-group input:focus {
  outline: none;
  border-color: #D4AF37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}

.question-input {
  margin-bottom: 24px;
}

.question-input label {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
  color: #8B4513;
  font-size: 16px;
}

.question-input textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid #8B4513;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  color: #2C1810;
  font-family: 'SimSun', serif;
  resize: vertical;
  min-height: 80px;
}

.question-input textarea:focus {
  outline: none;
  border-color: #D4AF37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}

.action-buttons {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 24px;
}

.btn-icon {
  margin-right: 8px;
  font-size: 20px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.coin-btn:hover .btn-icon,
.random-btn:hover .btn-icon {
  transform: scale(1.2) rotate(10deg);
}

.coin-btn {
  background: linear-gradient(45deg, #D4AF37, #FFD700);
  color: #2C1810;
  border: 2px solid #D4AF37;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
}

.coin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  background: linear-gradient(45deg, #FFD700, #D4AF37);
}

.coin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.random-btn {
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #F5DEB3;
  border: 2px solid #8B4513;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
}

.random-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
  background: linear-gradient(45deg, #A0522D, #8B4513);
}

.generate-btn,
.random-btn,
.step-by-step-btn {
  padding: 14px 28px;
  border: 2px solid #8B4513;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'SimSun', serif;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.step-by-step-btn {
  background: linear-gradient(45deg, #6a3093, #a044ff);
  color: #F5DEB3;
  border: 2px solid #6a3093;
}

.step-by-step-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(106, 48, 147, 0.4);
  background: linear-gradient(45deg, #a044ff, #6a3093);
}

.generate-btn {
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #F5DEB3;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
  background: linear-gradient(45deg, #A0522D, #8B4513);
}

.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.coin-btn {
  background: linear-gradient(45deg, #D4AF37, #FFD700);
  color: #2C1810;
  border: 2px solid #D4AF37;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.coin-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  background: linear-gradient(45deg, #FFD700, #D4AF37);
}

.random-btn {
  background: transparent;
  color: #8B4513;
  border: 2px solid #8B4513;
}

.random-btn:hover {
  background: #8B4513;
  color: #F5DEB3;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.error-message {
  background: #fed7d7;
  color: #c53030;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  text-align: center;
}

.result-section {
  background: rgba(245, 222, 179, 0.95);
  padding: 32px;
  border-radius: 8px;
  border: 2px solid #8B4513;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 0 20px rgba(139, 69, 19, 0.1);
  position: relative;
  z-index: 2;
}

.bian-gua-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #8B4513;
}

.bian-gua-section h3 {
  color: #8B4513;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
}

.bian-gua-info {
  background: rgba(139, 69, 19, 0.1);
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #D4AF37;
  color: #2C1810;
}

.interpretation {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #8B4513;
}

.interpretation h3 {
  color: #8B4513;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
}

.interpretation p {
  line-height: 1.8;
  color: #2C1810;
  font-size: 16px;
  text-align: justify;
}

.placeholder {
  text-align: center;
  color: #F5DEB3;
  opacity: 0.8;
  margin-top: 60px;
  font-size: 18px;
  font-style: italic;
}

/* 古风边框装饰 */
.chinese-border {
  position: absolute;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
  z-index: 1;
}

.top-border {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
}

.right-border {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2px;
  height: 80%;
}

.bottom-border {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
}

.left-border {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2px;
  height: 80%;
}

/* 八卦图装饰 */
.bagua-decoration {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4AF37, #8B4513);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4),
              inset 0 0 20px rgba(255, 255, 255, 0.2);
  z-index: 1;
  animation: float 6s ease-in-out infinite;
}

.bagua-symbol {
  font-size: 32px;
  color: #F5DEB3;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.top-left {
  top: 20px;
  left: 20px;
  animation-delay: 0s;
}

.top-right {
  top: 20px;
  right: 20px;
  animation-delay: 1.5s;
}

.bottom-left {
  bottom: 20px;
  left: 20px;
  animation-delay: 3s;
}

.bottom-right {
  bottom: 20px;
  right: 20px;
  animation-delay: 4.5s;
}

/* 祥云装饰 */
.cloud-decoration {
  position: absolute;
  font-size: 48px;
  color: rgba(212, 175, 55, 0.3);
  z-index: 1;
  animation: float 8s ease-in-out infinite;
  text-shadow: 2px 2px 8px rgba(212, 175, 55, 0.5);
}

.cloud-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.cloud-2 {
  top: 25%;
  right: 15%;
  animation-delay: 2s;
}

.cloud-3 {
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.cloud-4 {
  bottom: 30%;
  right: 10%;
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

/* 背景纹理 */
.yijing-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238B4513' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
</style>